<template>
  <div class="intergrations-get-started">
  <el-dialog :visible.sync="visible"
            title="Sync Integrations"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            :modal='false'
            @closed="clearFormData"
            height="580px"
            width="620px">
    <div class="dialog_header">
      <span class="integration_pagetext_box el-icon-warning-outline"></span>
      <p>The following integration is needed for this page to work. Please set up the integration below or <span class="intgegration_page_text" @click="toIntegerationPage">go to integration page</span> for more information.
      </p>
    </div>
    <Integrations :integrationCode="integrationCode" :showInter="showInter" :fromNextTicket="fromNextTicket" :nextTicket="nextTicket"></Integrations>
    <template slot="footer">
      <!-- <el-button type="primary"
                size="small"
                @click="visible = false">{{ $t('custom.reports.continue') }}</el-button> -->
    </template>
  </el-dialog>
  </div>
</template>

<script>
import Integrations from '@/views/modules/mspbots/Integrations/index'
export default {
  data () {
    return {
      visible: false,
      showInter: true,
      fromNextTicket: true
    }
  },
  props: {
    nextTicket: {
      type: String
    },
    integrationCode: {
      type: Array
    }
  },
  components: { Integrations },
  watch: {
  },
  computed: {

  },
  created () {

  },
  methods: {
    clearFormData () {
    },
    dataFormSubmitHandle () { },
    toIntegerationPage () {
      this.$router.push({ path: '/Integrations' })
    }
  }
}
</script>

<style lang="scss">
.intergrations-get-started{
  .el-collapse{
    border:0;
  }
  .content_data_connector{
        box-shadow: 0px 0px 0px 0px #f0f0f0 !important;
  }
  .el-collapse-item__header{
    border: 0;
  }
  .el-dialog__header{
    padding: 15px 16px;
  }
  .el-dialog__body{
    padding: 16px !important;
    .dialog_header{
      display: flex;
      justify-content: flex-start;
      height: 76px;
      padding: 8px;
      background: #FFF1F0;
      border-radius: 4px;
      p{
        width: 440px;
        height: 60px;
        font-size: 14px;
        color: #404040;
        line-height: 20px;
        margin: 0;
        .intgegration_page_text{
          color:red;
          text-decoration:underline;
          cursor: pointer;
        }
      }
      .integration_pagetext_box{
        display: inline-block;
        width: 22px;
      }
      .el-icon-warning-outline::before{
        font-size: 14px;
        color: red;
      }
    }
  }

  .el-dialog__wrapper{
    background: rgba(0, 0, 0, 0.2);
    .el-dialog{
      // background-image: url('https://oss.mspbots.ai/app/other/inertgration_report.png');
      background-position: center;
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }
  }
  .data_connectors{
    ::v-deep .el-input{
      width: 100% !important;
    }
    .aui-card--fill{
      min-height: 100px;
    }
    ::v-deep .el-card__body{
      padding: 0 !important;
    }
    .el-collapse-item__wrap{
      max-height: 280px;
      overflow-y: auto;
    }
  }
}
</style>
